<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        /* 
            this的四种绑定规则:
                1.默认绑定 独立执行 foo()
                2.隐式绑定 被一个对象执行 obj.foo() 
                3.显示绑定：call/apply/bind
                4.new绑定: new Foo() -> 创建一个新对象，并且赋值给this
        */
        class App extends React.Component {
            // class fields 实例变量
            name = "App"
            constructor() {
                super()
                this.state = {
                    message: "Hello React",
                    counter: 100
                }
            }

            btnClick() {
                this.setState({ counter: this.state.counter + 1 })
            }
            btn2Click = () => {
                console.log("我是按钮2", this)
                this.setState({ counter: 1000 })
            }

            btn3Click() {
                console.log("btn3Click", this)
            }

            render() {
                const { message } = this.state

                return (
                    <div>
                        {/* 1.this绑定方式一：bind绑定 */}
                        <button onClick={this.btnClick.bind(this)}>按钮1</button>

                        {/* 2.this绑定方式二：ES6 class fields 了解 */}
                        <button onClick={this.btn2Click}>按钮2</button>

                        {/* 3.this绑定方式三 直接传入一个箭头函数 */}
                        <button onClick={()=> this.btn3Click()}>按钮3</button>

                        <h2>当前计数：{this.state.counter}</h2>

                    </div>
                )
            }
        }

        const root = ReactDOM.createRoot(document.querySelector("#root"))
        root.render(<App />)


    </script>
</body>

</html>